<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="js/photoSwiper/photoswipe.css">
    <link rel="stylesheet" type="text/css" href="js/photoSwiper/default-skin/default-skin.css">
    <script type="text/javascript" src="js/photoSwiper/photoswipe.js"></script>
    <script type="text/javascript" src="js/photoSwiper/photoswipe-ui-default.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <button id="x1">查看相册</button>
    <ul class="photo-list clearfix" id="J_photo-list">
        <li>
            <a href="https://wnworld.com/photoSwiper/images/1024_683.jpg" class="zoom-img">
                <img src="https://wnworld.com/photoSwiper/images/1024_683.jpg"  class="img" />
            </a>
        </li>
        <li>
            <a href="https://wnworld.com/photoSwiper/images/964_1024.jpg" class="zoom-img">
                <img src="https://wnworld.com/photoSwiper/images/964_1024.jpg" class="img"  />
            </a>
        </li>
        <li>
            <a href="https://wnworld.com/photoSwiper/images/666_562.jpg" class="zoom-img">
                <img src="https://wnworld.com/photoSwiper/images/666_562.jpg" class="img"  />
            </a>
        </li>
        <li>
            <a href="https://wnworld.com/photoSwiper/images/1920_925.jpg" class="zoom-img">
                <img src="https://wnworld.com/photoSwiper/images/1920_925.jpg" class="img"  />
            </a>
        </li>
    </ul>  
    <script type="text/javascript">

    var imgReady = (function() {
    var list = [],
        intervalId = null,

        // 用来执行队列
        tick = function() {
            var i = 0;
            for (; i < list.length; i++) {
                list[i].end ? list.splice(i--, 1) : list[i]();
            };
            !list.length && stop();
        },

        // 停止所有定时器队列
        stop = function() {
            clearInterval(intervalId);
            intervalId = null;
        };

    return function(url, ready, load, error) {

        var onready, width, height, newWidth, newHeight,
            img = new Image();

        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {

            ready.call(img);
            load && load.call(img);
            return;
        };

        width = img.width;
        height = img.height;

        // 加载错误后的事件
        img.onerror = function() {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 图片尺寸就绪
        onready = function() {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果图片已经在其他地方加载可使用面积检测
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();

        // 完全加载完毕的事件
        img.onload = function() {
            // onload在定时器时间差范围内可能比onready快
            // 这里进行检查并保证onready优先执行
            !onready.end && onready();

            load && load.call(img);

            // IE gif动画会循环执行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };

        // 加入队列中定期执行
        if (!onready.end) {
            list.push(onready);
            // 无论何时只允许出现一个定时器，减少浏览器性能损耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();
    $("#x1").on("click",function(){
        //ajax 请求数据
        $.ajax({
            url:"https://wnworld.com/photoSwiper/php/photoswiper.php",
            type:"post",
            data:{type:1},
            dataType:"json",
            success:function(res){
                openPhotoSwipe(res);
            }
        })
    });
    

    //获取图片宽高
    $(".photo-list").find(".img").each(function(index,el){
        var $el=$(el);
        var src=$el.attr("src");
            imgReady(src, function (img) {
                $el.parent().attr({"data-size":this.width+"x"+this.height})
            });
    })

    $(".photo-list").on("click",".zoom-img",function(event){
        event.preventDefault();
        var index=$(".photo-list").find(".zoom-img").index(this);


        openPhotoSwipe2(index,$(".photo-list"),false,false);





        
    });


    function parseThumbnailElements($gallery){
        var  items = [];
        $gallery.find(".zoom-img").each(function(index, el) {
            var $el=$(el);
            var size=$el.attr("data-size").split('x')
            items.push({"src":$el.attr("href"),"w":size[0],"h":size[1]})
        });
        return items;
    }

    function openPhotoSwipe2(index, galleryElement, disableAnimation, fromURL) {

        var gallery;
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var items;
        //获取所有的选项
        items=parseThumbnailElements(galleryElement);
       
        options = {
            index:index,
            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = $(".photo-list").find(".img").eq(index).get(0), // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect(); 
                    console.dir(rect)

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }
        }
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    }











    function openPhotoSwipe(items){
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var options = {
            // history & focus options are disabled on CodePen        
            history: false,
            focus: false,
            showAnimationDuration: 0,
            hideAnimationDuration: 0
        };
        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();

    }



  

   

    
    </script>
    <!-- photoSwiper start ******************************************************* -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>
        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <!--  Controls are self-explanatory. Order can be changed. -->
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- photoSwiper end  **********************************************************-->
</body>

</html>